﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
  <title>乐优商城--商品搜索结果页</title>
  <link rel="icon" href="assets/img/favicon.ico">
  <link href='./css/material.css' rel="stylesheet">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="./js/vue/vue.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="./js/common.js"></script>
  <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
  <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
  <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
  <style type="text/css">
    .showButton{
      width: 80px;
      line-height: 24px;
      font-size: 14px;
      border: 1px solid #999999;
      margin: 5px auto;
      border-radius: 2px;
    }
    .showButton:hover{
      color: #409eff;
      border: 1px solid #409eff;
      cursor: pointer
    }
    * {
      box-sizing: unset;
    }

    .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
      width: 46px;
      height: 23px;
      border: 1px solid #DDD;
      background: #FFF;
      line-height: 23px;
      font-family: "\5b8b\4f53";
      text-align: center;
      font-size: 16px;
      color: #AAA;
      text-decoration: none;
      out-line: none
    }

    .btn-arrow:hover {
      background-color: #1299ec;
      color: whitesmoke;
    }

    .top-pagination {
      display: block;
      padding: 3px 15px;
      font-size: 11px;
      font-weight: 700;
      line-height: 18px;
      color: #999;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
      text-transform: uppercase;
      float: right;
      margin-top: 6px
    }

    .top-pagination span {
      margin-right: 10px;
    }

    .logo-list li {
      padding: 8px;
    }

    .logo-list li:hover {
      background-color: #f3f3f3;
    }

    .type-list a:hover {
      color: #1299ec;
    }

    .skus {
      list-style: none;
    }

    .skus li {
      list-style: none;
      display: inline-block;
      float: left;
      margin-left: 2px;
      border: 2px solid #f3f3f3;
    }

    .skus li.selected {
      border: 2px solid #dd1144;
    }

    .skus img {
      width: 25px;
      height: 25px;
    }

    am {
      color: red;
    }
    .command em{
      height: 14px;
      line-height: 14px;
      padding: 0 3px;
      border: 1px solid #e23a3a;
      margin-right: 3px;
      overflow: hidden;
      text-align: center;
      font-style: normal;
      font-size: 12px;
      font-family: "Helvetica Neue","Hiragino Sans GB",SimSun,serif;
      font-weight: bold;
      border-radius: 2px;
      color: #e23a3a;
    }
  </style>
  <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

<div id="searchApp">
  <div id="nav-bottom">
    <ly-top/>
  </div>


  <!--list-content-->
  <div class="main">
    <div class="py-container">

      <div class="bread">
        <!--面包屑-->
        <ul class="fl sui-breadcrumb">
          <li><span>全部结果:</span></li>
          <li><a href="#">手机</a></li>
          <li><span>手机通讯</span></li>
        </ul>
        <!--已选择过滤项-->
        <ul class="tags-choose">
          <li class="tag" v-for="(v,k) in params.filters" @click="cancelFilter(k)">
            {{k}}:<span style="color: red">{{showFilterValue(k,v)}}</span>
            <i class="sui-icon icon-tb-close"></i>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <!--过滤项-->
      <div class="clearfix selector">
        <div class="type-wrap logo" v-for="(v, k, i) in remainFilterList" :key="k" v-if="k === '品牌'">
          <div class="fl key brand">品牌</div>
          <div class="value logos">
            <ul class="logo-list">
              <li v-for="(o,j) in v" :key="j" v-if="o.image" @click="selectFilter(k, o.id)">
                <img :src="o.image"/>
              </li>
              <li v-else style="text-align: center" @click="selectFilter(k, o.id)">
                <a style="line-height: 30px; font-size: 12px" href="#">{{o.name}}</a>
              </li>
            </ul>
          </div>
          <div class="fl ext">
            <a href="javascript:void(0);" class="sui-btn">多选</a>
          </div>
        </div>
        <div class="type-wrap" v-else v-show="i < 5 || showMore">
          <div class="fl key">{{k}}</div>
          <div class="fl value">
            <ul class="type-list">
              <li v-for="(o,j) in v" :key="j" @click="selectFilter(k, o.id || o)">
                <a>{{o.name || o}}</a>
              </li>
            </ul>
          </div>
          <div class="fl ext"></div>
        </div>

        <div class="type-wrap" style="text-align: center" v-show="Object.keys(remainFilterList).length > 5">
          <div class="showButton" v-show="!showMore" @click="showMore=true">
            更多 <i style="font-size: 16px;" class="el-icon-arrow-down"></i>
          </div>
          <div class="showButton" v-show="showMore" @click="showMore=false">
            收起 <i style="font-size: 16px;" class="el-icon-arrow-up"></i>
          </div>
        </div>
      </div>
      <!--details-->
      <div class="details">
        <!--排序及顶部分页-->
        <div class="sui-navbar">
          <div class="navbar-inner filter">
            <ul class="sui-nav">
              <li :class="{active: sortIndex===i}" v-for="(s,i) in sortList" :key="i">
                <a href="#" @click="selectSortField(i)">{{s.text}}
                  <i :class="s.defaultDesc || params.desc ? 'el-icon-caret-bottom': 'el-icon-caret-top'"></i>
                </a>

              </li>
            </ul>
            <div class="top-pagination">
              <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
              <span><i style="color: red;">{{params.page}}</i>/{{totalPage}}</span>
              <a class="btn-arrow" href="#" @click.prevent="prePage" style="display: inline-block">&lt;</a>
              <a class="btn-arrow" href="#" @click.prevent="nextPage" style="display: inline-block">&gt;</a>
            </div>
          </div>
        </div>
        <!--商品列表-->
        <div class="goods-list">
          <ul class="yui3-g">
            <li class="yui3-u-1-5" v-for="g in goodsList" :key="g.id" style="margin-bottom: 10px">
              <div class="list-wrap">
                <div class="p-img">
                  <a :href="'/item/'+g.id+'.html'" target="_blank"><img :src="g.image" height="200"/></a>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>{{ly.formatPrice(price(g.prices))}}</i>
                  </strong>
                </div>
                <div class="attr" style="overflow: hidden">
                  <em v-html="g.title"></em>
                </div>
                <div class="cu">
                  <em><span>促</span>满一件可参加超值换购</em>
                </div>
                <div class="commit">
                  <span class="command" style="line-height: 12px;font-size: 12px;">
                    本月累计售出 <em>{{g.sold}}</em>件
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!--底部分页-->
        <div class="fr">
          <div class="sui-pagination pagination-large">
            <ul style="width: 550px">
              <li :class="{prev:true,disabled:params.page === 1}">
                <a href="#">«上一页</a>
              </li>
              <li :class="{active: index(i) === params.page}" v-for="i in Math.min(5,totalPage)" :key="i">
                <a href="#" @click.prevent="params.page=index(i)">{{index(i)}}</a>
              </li>
              <li class="dotted" v-show="totalPage > 5"><span>...</span></li>
              <li :class="{next:true,disabled:params.page === totalPage}">
                <a href="#">下一页»</a>
              </li>
            </ul>
            <div>
              <span>共{{totalPage}}页&nbsp;</span>
              <span>
            到第
            <input type="text" class="page-num" :value="toPageNum">
            页 <button class="page-confirm" @onclick="toPage">确定</button>
        </span>
            </div>
          </div>
        </div>
      </div>
      <!--热卖商品-->
      <div class="clearfix hot-sale">
        <h4 class="title">热卖商品</h4>
        <div class="hot-list">
          <ul class="yui3-g">
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_01.png"/>
                </div>
                <div class="attr">
                  <em>Apple苹果iPhone 6s (A1699)</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_03.png"/>
                </div>
                <div class="attr">
                  <em>金属A面，360°翻转，APP下单省300！</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_04.png"/>
                </div>
                <div class="attr">
                  <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4068.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有20人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-4">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="img/like_02.png"/>
                </div>
                <div class="attr">
                  <em>Apple苹果iPhone 6s (A1699)</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</div>

<script type="text/javascript">
  var vm = new Vue({
    el: "#searchApp",
    data: {
      ly,
      params: {
        key: "",// 搜索关键字
        page: 0,// 当前页码
        sortBy: '', // 排序字段
        desc: true,// 是否降序
        filters:{} // 过滤项
      },
      total: 0,// 总条数
      totalPage: 0, // 总页数
      goodsList: [], // 商品列表
      toPageNum: 1,// 要跳到第几页
      filterList: {}, // 过滤项
      showMore: false, // 是否显示更多
      sortList:[ // 排序项列表
        {text:"综合", field: "", defaultDesc: true},
        {text:"销量", field: "sold", defaultDesc: true},
        {text:"新品", field: "updateTime", defaultDesc: true},
        {text:"价格", field: "prices", defaultDesc: false}
      ],
      sortIndex: 0, // 选中的排序项索引
    },
    created() {
      // 获取请求参数
      let key = ly.getUrlParam("key");
      if (!key) return;
      // 获取其它参数
      let params = ly.parse(location.hash.substring(1));
      // 初始化其它请求参数
      params.page = params.page ? parseInt(params.page) : 1;
      params.key = key;
      params.filters = params.filters || {};
      params.sortBy = "";
      params.desc = true;
      this.params = params;
    },
    watch: {
      "params.key"(val, oldVal) {
        if (!oldVal) {
          return;
        }
        // 搜索
        this.searchData();
        // 过滤项
        this.getFilters();
      },
      "params.page"(val, oldVal) {
        if (!oldVal) {
          return;
        }
        let {key, ...obj} = this.params;
        location.hash = "#" + ly.stringify(obj);
        // 搜索
        this.searchData();
      },
      "params.filters"() {
        // 获取请求参数
        let {key, ...obj} = this.params;
        // 保存到路径hash中
        location.hash = "#" + ly.stringify(obj);
        // 如果当前不是第一页，则重置页面到第一页
        if (this.params.page !== 1) {
          this.params.page = 1;
        } else { // 如果是第一页，则查询数据和新的过滤项列表
          // 数据查询
          this.searchData();
          // 过滤项查询
          this.getFilters();
        }
      }
    },
    methods: {
      searchData() {
        axios.post("/search/goods/list", this.params)
          .then(resp => {
            // 分页数据
            this.total = resp.data.total;
            // 计算总页数
            this.totalPage = Math.floor((this.total + 19) / 20);
            // 商品
            this.goodsList = resp.data.content;
          })
          .catch(e => console.log(e))
      },
      getFilters() {
        axios.post("/search/goods/filter", this.params)
          .then(resp => {
            this.filterList = resp.data;
          })
          .catch(e => console.log(e))
      },
      nextPage() {
        if (this.params.page < this.totalPage) this.params.page++;
      },
      prePage() {
        if (this.params.page > 1) this.params.page--;
      },
      index(i) {
        if (this.params.page <= 3 || this.totalPage <= 5) {
          // 当前页小于3，则页码就是从 i 开始
          return i;
        } else if (this.params.page <= this.totalPage - 2) {
          // 大于3，则从page-2开始，然后逐个加1
          return this.params.page - 3 + i;
        } else {
          return this.totalPage - 5 + i;
        }
      },
      toPage() {
        this.params.page = Math.max(Math.min(100, this.totalPage, this.toPageNum), 1);
      },
      price(arr) {
        return this.params.desc ? Math.max.apply(null, arr) : Math.min.apply(null, arr);
      },
      selectFilter(k, v) {
        // 拷贝原有属性
        const {...obj} = this.params.filters;
        // 添加新属性
        obj[k] = v;
        // 覆盖
        this.params.filters = obj;
      },
      selectSortField(i){
        // 获取选中的项
        const s = this.sortList[i];
        // 判断如果重复点击price
        if(this.sortIndex===i && i === 3){
          // 排序方式取反
          this.params.desc = !this.params.desc;
        }else {
          this.params.desc = s.defaultDesc;
        }
        // 改变选中的项
        this.sortIndex = i;
        // 改变参数值
        this.params.sortBy = s.field;
        if(this.params.page !== 1){
          // 重置到第一页
          this.params.page = 1;
        }else{
          // 搜索数据
          this.searchData();
        }
      },
      cancelFilter(k){
        // 拷贝原有属性
        const {...obj} = this.params.filters;
        // 添加新属性
        delete obj[k];
        // 覆盖
        this.params.filters = obj;
      },
      showFilterValue(k,v){
        if(k !== "分类" && k !== "品牌"){
          return v;
        }
        return this.filterList[k][0].name;
      }
    },
    computed: {
      remainFilterList() {
        // 获取已经选中的过滤项的key
        const keys = Object.keys(this.params.filters);
        // 定义空对象，记录符合条件的过滤项
        const obj = {};
        // 遍历全部过滤项
        Object.keys(this.filterList).forEach(key => {
          // 过滤掉已经包含在已选中的过滤项中的，还有待选项不超过1个的
          if(!keys.includes(key) && this.filterList[key].length > 1){
            obj[key] = this.filterList[key];
          }
        });
        return obj;
      }
    },
    components: {
      lyTop: () => import("./js/pages/top.js")
    }
  });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
  <div class="tbar-cart-item">
    <div class="jtc-item-promo">
      <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
      <div class="promo-text">已购满600元，您可领赠品</div>
    </div>
    <div class="jtc-item-goods">
      <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
      <div class="p-name">
        <a href="#">{1}</a>
      </div>
      <div class="p-price"><strong>¥{3}</strong>×{4}</div>
      <a href="#none" class="p-del J-del">删除</a>
    </div>
  </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
  $(function () {
    $("#service").hover(function () {
      $(".service").show();
    }, function () {
      $(".service").hide();
    });
    $("#shopcar").hover(function () {
      $("#shopcarlist").show();
    }, function () {
      $("#shopcarlist").hide();
    });

  })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>